<template>
	<section class="body">
		<div class="container">
			<div class="title">Awesome!</div>
		</div>
	</section>
</template>

<script>
	export default {
		methods: {
			init () {
				// title内容重新组合成span
				function wrapChars (selector) {
					let e = document.getElementsByClassName(selector)[0]
					if (e.children.length > 0) return

					let text = e.innerText + ''
					e.innerText = ''
					text.split('').forEach(character => {
						let span = document.createElement('span')
						span.innerHTML = character
						e.appendChild(span)
					})
				}
				// 
				function addClickReplay () {
					let title = document.getElementsByClassName('title')[0];
					document.addEventListener('click', function (e) {
						e.preventDefault()
						title.classList.remove('title')
						void title.offsetWidth
						title.classList.add('title')
					}, false)
				}
				window.addEventListener('load', function () {
					wrapChars('title')
					addClickReplay('title')
				}, true)
			}
		},
		mounted () {
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	// 定义变量
	:root {
		--t: 800ms; // time
		--d: 200ms; // delay
		--n: 1; // times
		--dl: calc(var(--t) - var(--d)); // delay last
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #EEE;
		color: #444;
		position: absolute;
		font: 5em "Helvetica";
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title {
		height: 1em;
		overflow: hidden;
		span {
			display: inline-block;
			position: relative;
			opacity: 0;
			&:nth-child(2n) {
				animation: even var(--t) var(--d) ease-in-out var(--n) forwards,
					pulsate var(--t) calc(2*var(--t) - var(--d)) ease 1;
			}
			&:nth-child(odd) {
				animation: odd var(--t) ease-in-out var(--n) forwards,
					pulsate var(--t) calc(2*var(--t) - var(--d)) ease 1;
			}
			// first
			&:nth-child(-n+1) {
				animation: first var(--t) ease-in-out var(--n) forwards,
					pulsate var(--t) calc(2*var(--t) - var(--d)) ease 1;
			}
			// last
			&:nth-last-child(-n+1) {
				animation: last var(--t) var(--dl) ease-in-out var(--n) forwards,
					bounce var(--t) calc(3*var(--t) - var(--d)) ease-in-out 1;
			}
		}
	}

	@keyframes even {
		0% {
			opacity: 0;
			bottom: -2em;
		}
		100% {
			opacity: 1;
			bottom: 0px;
		}
	}
	@keyframes odd {
		0% {
			opacity: 0;
			top: -2em;
		}
		100% {
			opacity: 1;
			top: 0px;
		}
	}
	@keyframes first {
		0% {
			opacity: 0;
			left: 2em;
		}
		100% {
			opacity: 1;
			left: 0px;
		}
	}
	@keyframes last {
		0% {
			opacity: 0;
			right: -2em;
		}
		100% {
			opacity: 1;
			right: 0px;
		}
	}
	@keyframes pulsate {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(1.1);
		}
	}
	@keyframes bounce {
		0%, 100% {
			transform: translateX(0px);
		}
		50% {
			transform: translateX(3px);
		}
	}

</style>